<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>店铺设置</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/public.css">
</head>
<style>
    .header{
        line-height: 40px;
        background: #f8f8f8;
    }
    .header p{
        color: #323232;
        text-align: center;
        font-size: 0.7rem;
        margin-right: 40px;

    }
    .header i{
        height: 40px;
        width: 40px;
        display:block;
        float: left;
        background: url("../../images/dianpuSet.png") no-repeat;
        background-size: 512px;
    }
    .main .text{
        line-height: 40px;
        position: relative;
        overflow: hidden;

    }
    .main .text:after {background:#e6e6e6;width:200%;height:1px;position:absolute;bottom:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}
    .main .text p{
        float: left;
        font-size: 0.7rem;
    }
    .main ul li{
        padding: 0 10px;
    }
    .main .text input{
        width: 75%;
        float: right;
        height: 36px;
        border: 0;
        text-align: right;
        font-size: 0.7rem;
    }
    .main .text p:last-child{
        float: right;
        color: #b4b4b4;
    }
    .main .text p:last-child img{
        width: 50px;
        height: 50px;
        float: right;
    }
    .main .textImg{
        line-height: 50px;
    }
    .main .textImg p:last-child{
        width: 77%;
        padding-top: 8px;
    }
    .main .textImg input{
        width: 60%;
    }
    .main .textImg p:last-child input{
        position: absolute;
        right: 0;
        height: 50px;
    }
    .main .textImg p:last-child img{

        float: right;

    }
    .main .textImg p:first-child{
        padding-top: 15px;
    }

    .main .footerText{
        line-height: 20px;
    }
    .main .footerText p:first-child{
        height: 40px;
        width: 20%;
        padding-top: 10px;
        box-sizing: border-box;
    }
    .main .footerText textarea{
        resize: none;
        padding: 5px 0;
        box-sizing: border-box;
        float: left;
        width: 100%;
        text-indent: 1em;
        height: 100px;
        outline: none;
        border-color: #cccccc;
        font-size: 0.7rem;
        border: 0;
    }
    .footer{
        background: #fe6d82;
        line-height: 40px;
        text-align: center;
        margin: 20px auto 0px auto;
        width: 90%;
        border-radius: 5px;
    }
    .footer input {
        font-size: 0.8rem;
        color: #ffffff;
        background: none;
        border: none;
    }
    .pic span{
        display: inline-block;
        width: 55%;
        position: absolute;
        right: 60px;
        height: 50px;
        background: #ffffff;
        z-index: 2;
    }
</style>
<body style="background: #fff;">
<header id="header" class="fixed">
    <div class="header-wrap">
        <div class="header-l">
            <a href="javascript:history.go(-1)">
                <i class="back"></i>
            </a>
        </div>
        <div class="header-title">
            <h1>店铺设置-我的店铺</h1>
        </div>
    </div>
</header>
<form action="/mobile/index.php?act=store&op=store_setting" method="post" onsubmit="return checkForm()">
<div class="main" style="margin-top: 40px;">
    <ul>
        <li class="text">
            <p>小店名称</p>
            <input type="text" placeholder="小店名字" name="store_name" id="store_name" value="" />
        </li>
        <li class="text">
            <p>店铺缩写</p>
            <input type="text" placeholder="小店缩写" name="store_letters"  value="" />
        </li>
        <li class="text textImg">
            <p>小店头像</p>
            <p class="pic">
                <span></span>
                <input type="file" name="store_avatar" id="fileUpload"/>
                <img src="http://img4.imgtn.bdimg.com/it/u=3914256333,1448866907&fm=23&gp=0.jpg" alt="">
            </p>
        </li>
        <li class="text footerText">
            <p>小店简介</p>
            <textarea placeholder="随便说两句吧"></textarea>
        </li>
    </ul>
</div>
<div class="footer">
    <input type="submit" value="提交保存" >
</div>
</form>
</body>
</html>
<script>
    function checkForm(){
          var formInput = document.getElementsByTagName('input');
          if(formInput[0].value==''){

                  return false;
          }
    }
</script>